<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

<head>
  <meta http-equiv="Content-Type"  content="text/html; charset=iso-8859-1" />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta http-equiv="Pragma"        content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-store" />
  <meta http-equiv="Cache-Control" content="must-revalidate" />
  <meta http-equiv="Expires"       content="Tue, 7 June 2011 10:00:00 GMT" />
  <style type="text/css">
    body, html { font-family:helvetica,arial,sans-serif; font-size:90%; width: 100%; height: 100%; margin: 0;}
  </style>
  <link rel="stylesheet" type="text/css" href="js/dojo-root/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" type="text/css" href="common/css/theme/themeDefault.css" />

  <title>Dojo Demo</title>
        
  <script type="text/javascript">
    var djConfig = {
      parseOnLoad: true,
      baseUrl:"./",
      modulePaths : {
        "dijit" : "js/dojo-root/dijit",
        "dojo" : "js/dojo-root/dojo",
        "dojox" : "js/dojo-root/dojox",
        "common" : "js/common"
      }
    };
  </script>    
  <!-- src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" -->
  <script type="text/javascript" src="js/dojo-root/dojo/dojo.js"></script>     
  <script type="text/javascript" src="js/common/common.js"></script> 
  <script type="text/javascript" src="js/init.js"></script>     
  <script type="text/javascript" src="js/debug/debugUtil.js"></script>     
  
  <!-- ----------------------------------------------------- -->
  <!-- CUSTOMIZATION                                         -->
  <!-- Note that you will have to set the <body class=       -->
  <!-- from <body class="claro"> to <body class="claroXXX">  -->
  <!-- This will disable "claro" theme                       -->
  <!-- ----------------------------------------------------- -->
  <style type="text/css">
		#mytabs .dijitTabChecked {
			background-color: Red!important;
			background-image: none;
			/* background-image: url('Insert URL for SELECTED Tab Image')!important; */
		}

		#mytabs .dijitTab {
			background-color: green;
			background-image: none;
			font-weight: bold;
 			font-size: 15px;
			/* background-image: url('Insert URL for unselected Tab Image'); */
		}

		#mytabs .tabLabel {
		  background-color: yellow;
			color: blue;
			/* background-image: url('Insert URL for unselected Tab Image'); */
		}
	</style>
  
  
  <script type="text/javascript">
    dojo.require("dijit.MenuBar");
    dojo.require("dijit.MenuBarItem");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dijit.layout.AccordionContainer");
    dojo.require("dijit.layout.ContentPane");
  </script>
  
  <script type="text/javascript">
    initBaseURL();
    console.log("WebApp's base url: "+baseURL());
  </script>

  <script type="text/javascript">
    dojo.addOnLoad(function() {
    	//initApp();
    });
  </script>

</head>

<body class="claro">

	<div style="width: 490px; height: 300px">
		<div id="mytabs" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">

			<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
				Put content here for the first tab
			</div>
			<div dojoType="dijit.layout.ContentPane" title="My second tab">
				Put content here for the 2nd Tab
			</div>
			<div dojoType="dijit.layout.ContentPane" title="My last tab">
				Put content here for the last Tab
			</div>

		</div>
	</div>
	
</body>

</html>